import produce from "immer"

// 在小仓库中一个reducer就代表一个仓库
// reducer就是一个函数，他的两个仓库，一个是状态，一个是用来修改状态的

const initState = {
    size: localStorage.getItem("size") || "middle",
    lang: localStorage.getItem("lang") || navigator.language.split("-")[0],
    color: localStorage.getItem("color") || "#ffdafe"
}

function reducer(state = initState, { type, payload }) {
    // 在这里面的操作流程是固定的
    // 1.当信号到达时，先对state进行拷贝
    // 2.然后根据action中的type和payload来对老的statej进行操作
    // 3.返回修改后的哪个最新的state

    // 收到信号，再对老的数据state进行操作
    // console.log('actionapp', action);

    // 修改  拷贝  返回 ？ 还是拷贝  修改 返回
    return produce(state, (newState) => {
        // 根据action中的type和payload对老的state进行操作
        switch (type) {
            case "APP_SIZE":
                newState.size = payload
                localStorage.setItem("size", payload)
                break;
            case "APP_LANG":
                newState.lang = payload
                localStorage.setItem("lang", payload)
                break;
            case "APP_COLOR":
                newState.color = payload
                localStorage.setItem("color", payload)
                break;
            default:
        }
    })
}

export default reducer